import '../App.scss'

export default function CommentListItem({
  commentListItem,
  deleteComment,
  user,
}) {
  return (
    <div className="reply-item" key={commentListItem.rpid}>
      {/* 头像 */}
      <div className="root-reply-avatar">
        <div className="bili-avatar">
          <img
            className="bili-avatar-img"
            alt=""
            src="http://toutiao.itheima.net/resources/images/98.jpg"
          />
        </div>
      </div>

      <div className="content-wrap">
        {/* 用户名 */}
        <div className="user-info">
          <div className="user-name">{commentListItem.user.uname}</div>
        </div>
        {/* 评论内容 */}
        <div className="root-reply">
          <span className="reply-content">{commentListItem.content}</span>
          <div className="reply-info">
            {/* 评论时间 */}
            <span className="reply-time">{commentListItem.ctime}</span>
            {/* 评论数量 */}
            <span className="reply-time">点赞数: {commentListItem.like}</span>
            {/* 条件：当前登录的用户uid与评论对应用户uid相等才显示 */}
            {user.uid === commentListItem.user.uid && (
              <span
                className="delete-btn"
                onClick={() => deleteComment(commentListItem.rpid)}
              >
                删除
              </span>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}
